Higher-Order Component(HOC)
指的是在 React 中能夠幫助我們重複使用程式碼的 React Component。
// 官網中的範例
const EnhancedComponent = higherOrderComponent(WrappedComponent);
這邊使用的範例是 React.memo
他就是一個 HOC,也是我還在不認識 HOC 是啥時 就已經使用過的一個例子(疑?偷用繞口令加字數XD
範例
function Menu() {
console.log('memo component');
return <h3 style={{ color: "pink" }}>挖洗 nMenu 啦</h3>;
}
// 加上 memo
export default React.memo(Menu);
被 React.memo 包住的 component ,在父層重新渲染時他會被記憶住,所以 React 將跳過渲染這個子組件,且使用上次渲染的結果。 React.memo 通過記憶結果來提高性能。
被 memo 住的 component 會去比較父層傳入的 props 前後變化,若是在父層 re-render 時,傳入的 props 前後值進行淺比較結果並無改變時,component 就不會重新渲染。但他本身內部 state 有變化時,這個被 memo 住的 component 依然會重新渲染。